/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-10-08 15:39:45
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-10-08 17:06:52
 * @FilePath: /legion-iot/src/pages/dashboard/components/Devices.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import React, { useState, useEffect } from "react";
import ReactECharts from "echarts-for-react";
import * as echarts from "echarts";
import { theme, Progress } from "antd";
import { getFetch } from "@/utils/doFetch";
import { useRequest } from "ahooks";

const colors = {
  0: { "0%": "#ADD100", "100%": "#7B920A" },
  1: { "0%": "#FBD3E9", "100%": "#BB377D" },
  2: { "0%": "#606c88", "100%": "#3f4c6b" },
  3: { "0%": "#C9FFBF", "100%": "#FFAFBD" },
  4: { "0%": "#649173", "100%": "#DBD5A4" },
  5: { "0%": "#B993D6", "100%": "#8CA6DB" },
};

const config = {
  如皋科技创业园: {
    color: "#3acafa",
    key: 4,
  },
  万林名都城: {
    color: "#e2ee05",
    key: 5,
  },
  景盛家园: {
    color: "#3acafa",
    key: 6,
  },
  西欧名邸: {
    color: "#a4e7fe",
    key: 7,
  },
};

function Devices({ data }) {
  const alldata = useRequest(
    async () => {
      let res = await getFetch({
        url: "/device/sensor_rate",
        params: {
          district_id: config?.[data?.title]?.key,
        },
      });
      return res?.data;
    },
    {
      refreshDeps: [data?.title],
    }
  );

  const {
    token: {
      colorBgContainer,
      colorTextBase,
      colorBgSecondary,
      colorPrimary,
      colorBgThird,
      colorBorder,
    },
  } = theme.useToken();

  return (
    <div
      style={{
        flex: 1,
        overflow: "hidden",
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: 10,
        padding: "10px 0",
      }}
    >
      {alldata?.data?.map((it, i) => (
        <div
          key={i}
          className="center"
          style={{ flexDirection: "column", overflow: "hidden" }}
        >
          <div className="center" style={{ flex: 1,alignItems:"flex-end" }}>
            <Progress
              type="dashboard"
              status="active"
              percent={50}
              size="small"
              strokeColor={colors[i]}
              format={(percent, successPercent) => {
                return (
                  <div className="center" style={{ flexDirection: "column" }}>
                    <span>{it?.rate ?? 0}%</span>
                    <span>{it?.num}</span>
                  </div>
                );
              }}
            />
          </div>
          <div className="center" style={{ height:36}}>
            <span style={{ fontSize: 12,textAlign:"center" }}>{it?.type}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

export default Devices;
